<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.4.1.min.js"></script>

    <style type="text/css">
        .unifyWidth {
            width: 400px;
        }

        .unifyHeight {
            height: 50px;
        }
    </style>


    <script>
        window.onload = function () {
            var ws = new WebSocket('ws://localhost:3564')

            ws.onopen = function () {
                // 发送 Hello 消息
                // ws.send(JSON.stringify({
                //     Hello: {
                //         Name: 'leaf'
                //     }
                // }))
                console.log("连接成功")
            };
            ws.onclose = function () {
                console.log('关闭websocket');
            };


            ws.onmessage = function onMessage(evt) {
                console.log(evt);
                var filrReader = new FileReader();
                filrReader.onload = function () {
                    var arrayBuffer = this.result;
                    var decoder = new TextDecoder('utf-8')
                    var json = JSON.parse(decoder.decode(new DataView(arrayBuffer)));
                    console.log(json);
                };
                filrReader.readAsArrayBuffer(evt.data);
            };

            $("#common button").bind("click", function () {
                let json = $("#common textarea").val();
                ws.send(json)
            });


            $("#login button").bind("click", function () {
                let account = $("#login input").val();
                let json = {
                    C2S_Login: {
                        Account: account,
                        Password: account
                    }
                };
                ws.send(JSON.stringify(json));
            });

            // $("#pong button").bind("click", function () {
            //     let json = $("#pong input").val();
            //     ws.send(json)
            // });

            $("#matching button").bind("click", function () {
                let json = $("#matching input").val();
                ws.send(json)
            });

            $("#loadBattle button").bind("click", function () {
                let json = $("#loadBattle input").val();
                ws.send(json)
            });
            $("#sort button").bind("click", function () {
                let json = $("#sort input").val();
                ws.send(json)
            });


        };
    </script>


</head>
<body>

<div id="common">
    <textarea class="unifyWidth unifyHeight"></textarea>
    <button>发送通用</button>
</div>

<div id="login">
    <input type="text" class="unifyWidth" value='1'>
    <button>登录</button>
</div>

<!--
<div id="pong">
    <input type="text" class="unifyWidth" value='{"C2S_Pong":{"Pong":"OK"}}'>
    <button>心跳</button>
</div>
-->

<div id="matching">
    <input type="text" class="unifyWidth" value='{"C2S_Matching":{"ID":1,"Score":700}}'>
    <button>匹配</button>
</div>

<div id="loadBattle">
    <input type="text" class="unifyWidth" value='{"C2S_BattleLoadComplete":{"OK":true}}'>
    <button>加入战斗</button>
</div>

<div id="sort">
    <input type="text" class="unifyWidth" value='{"C2S_BattleShot":{"Score":10,"AimingPoint":{"X":1,"Y":1,"Z":1}}}'>
    <button>射箭</button>
</div>


</body>
</html>